<template>
  <div class="horizontalItemMenu" :style="{width:getWidth}">
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <!--   -->
      <template v-if="!navMenu.children&&navMenu">
        <el-menu-item
          :key="navMenu.id"
          :data="navMenu"
          :index="navMenu.path"
          @click.native="showother(navMenu)"
        >
          <span slot="title">{{ navMenu.title }}</span>
        </el-menu-item>
      </template>
      <!-- 此菜单下还有子菜单 -->
      <template v-if="navMenu.children&&navMenu">
        <el-menu-item
          v-if="navMenu.title==navMenu.children[0].title&&navMenu.children.length==1"
          :key="navMenu.children[0].id"
          :data="navMenu"
          :index="navMenu.children[0].path"
          @click.native="showother(navMenu)"
        >
          <span slot="title">{{ navMenu.title }}</span>
        </el-menu-item>
        <el-submenu
          v-else
          :key="navMenu.code"
          :data="navMenu"
          :index="navMenu.path"
        >
          <template slot="title">
            <span> {{ navMenu.title }}</span>
          </template>
          <!-- 递归 -->
          <HorizontalItemMenu :nav-menus="navMenu.children" />
        </el-submenu>
      </template>
    </template>

  </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
  name: 'HorizontalItemMenu',
  props: {
    navMenus: {
      type: Array,
      default: () => ([])
    },
    getWidth: {
      type: String,
      default: '200px'
    }

  },

  computed: {
    ...mapGetters([
      'permission_routes'
    ])
  },

  created() {
    this.$parent.$parent.activeIndex = this.navMenus[0].path;
    this.showother(this.navMenus[0]);
  },
  methods: {
    showother(item) {
      this.$parent.$parent.$parent.parentName = item.title;
      if (item.thirdWebsite !== '' && item.thirdWebsite) {
        const src = item.thirdWebsite;
        window.open(src);
      } else {
        if (item.title === '全景图' || item.title === '业务中心') {
          this.$parent.$parent.$parent.isShow = false;
          if (item.title === '业务中心') {
            this.$parent.$parent.$parent.title = item.title;
            console.log(item);
            const params = {
              parentName: item.title,
              title: item.title,
              menuId: item.id,
              flag: 0,
              isHideLeft: item.isHideLeft,
              isHideTop: item.isHideTop,
              type: 0
            };
            const host = window.location.host;
            const name = window.location.href.split('/')[3];
            let urlParams = '';
            for (const key in params) {
              urlParams = urlParams + '&' + key + '=' + params[key];
            }
            if (item.isTargetNew + '' === '0') {
              if (item.componentPath.indexOf('/') !== -1) {
                this.$parent.$parent.$parent.src = `http://${host}/${name}/#${item.path}?sign=1${urlParams}`;
              } else {
                this.$parent.$parent.$parent.src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
              }
            } else {
              if (item.componentPath.indexOf('/') !== -1) {
                const src = `http://${host}/${name}/#${item.path}?sign=1${urlParams}`;
                window.open(src);
              } else {
                const src = `http://${host}/${name}/#/error?sign=1${urlParams}`;
                window.open(src);
              }
            }
            localStorage.setItem('siderName', item.meta.title);
          }
        } else {
          this.$parent.$parent.$parent.isShow = true;
        }
        this.permission_routes.map(o => {
          if (o.title && o.title === item.title && o.children) {
            this.$parent.$parent.$parent.secondList = o.children.sort((a, b) => Number(a.orderId) - Number(b.orderId));
            this.$parent.$parent.$parent.getWidth = o.children.length * 140 + 'px';
          }
        });
        setTimeout(() => {
          if (item.title !== '业务中心') {
            this.$parent.$parent.$parent.isActive = 0;
            this.$parent.$parent.$parent.getPath(this.$parent.$parent.$parent.secondList[0], 0);
          }
        }, 200);
      }
    }

  }
};
</script>

<style lang="scss">
*{
  outline:none;
}
.el-menu--popup-bottom-start {
    margin-top: 5px;
    background: rgb(28, 63, 83) !important;
}

/* 水平样式 */
 .el-menu--horizontal>div>.el-submenu {
    float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal>div>.el-menu-item {
    float: left;
    height: 50px !important;
    line-height: 50px !important;
    margin: 0;
    font-weight: bolder;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal>div>.el-submenu .el-submenu__icon-arrow {
    position: static;
    vertical-align: middle;
    margin-left: 8px;
    margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal>div>.el-submenu .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
    font-weight: bolder;

}
.el-submenu__title i {
  color: black !important;
  font-weight: bolder !important;
}
.el-menu--horizontal .el-menu .el-menu-item, .el-menu--horizontal .el-menu .el-submenu__title {
    background-color: #fff;
    float: none;
    height: 45px !important;
    line-height: 45px !important;
    padding: 0 10px;
    color: #909399;
}

</style>
